<template>
  <div class="shop">
    <!-- 分类滚动视图 -->
    <van-tabs>
      <van-tab
        v-for="category in categories"
        :title="category.name"
        :key="category.id"
      >
      </van-tab>
    </van-tabs>
    <!-- 轮播图 -->
    <div class="l">
      <van-swipe :autoplay="2000" :width="363" :height="120">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img
            :src="'https://gfs9.gomein.net.cn/wireless/T1FtLABKAv1RCvBVdK_1065_390.jpg'"
            :style="{ width: '100%', height: '100%' }"
          />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 图标 -->
    <van-grid :gutter="-20" :border="false" :icon-size="53" :column-num="5">
      <van-grid-item
        v-for="value in 10"
        :key="value"
        icon="https://gfs7.gomein.net.cn/wireless/T1DYdcBTEv1RCvBVdK_129_129.png"
        text="直播"
      />
    </van-grid>
    <div class="right">
      <div class="photo">
        <ul class="list-img">
          <li>
            <a>
              <img src="https://gfs5.gomein.net.cn/T1UMZkByxv1RCvBVdK.gif" />
            </a>
          </li>
          <li>
            <a>
              <img src="https://gfs5.gomein.net.cn/T1aSKkB_Cv1RCvBVdK.gif" />
            </a>
          </li>
        </ul>
      </div>
      <div class="left">
        <div class="photo">
          <ul class="list-img">
            <li>
              <a>
                <img src="https://gfs7.gomein.net.cn/T1umVABK_T1RCvBVdK.gif" />
              </a>
            </li>
            <li>
              <a>
                <img src="https://gfs7.gomein.net.cn/T1E6_ABTDT1RCvBVdK.gif" />
              </a>
            </li>
          </ul>
        </div>
        <div class="photo">
          <ul class="list-img">
            <li>
              <a>
                <img
                  src="https://gfs7.gomein.net.cn/wireless/T1zmbABvxT1RCvBVdK_375_284.jpg"
                />
              </a>
            </li>
            <li>
              <a>
                <img
                  src="https://gfs7.gomein.net.cn/wireless/T1c6dABjZT1RCvBVdK_375_284.jpg"
                />
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="homer">
      <van-divider>推荐商品</van-divider>
      <van-list
        class="home"
        v-model="loading"
        :finished="isEnd"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div
          class="shopCard"
          v-for="item in products"
          :key="item.id"
        >
          <img :src="item.image" alt="" />
          <h5>{{ item.title }}</h5>
          <p class="p2">
            <i>￥</i>
            {{ item.price }}
            <span class="cart" @click="handleAddToCart(item)"></span>
          </p>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import { getCategories, getHots } from '@/api/shop'
export default {
  name: 'Shop',
  data() {
    return {
      // 分类数组
      categories: [],
      images: [
        'https://img01.yzcdn.cn/vant/apple-1.jpg',
        'https://img01.yzcdn.cn/vant/apple-2.jpg',
        'https://img01.yzcdn.cn/vant/apple-2.jpg',
      ], // 轮播图数组
      products: [], // 推荐商品
      isEnd: false, // 是否所有推荐商品已查完
      nextIndex: 0, // 下一页推荐商品查询起始索引
      loading: true,
    }
  },
  async created() {
    // 实例创建后，立即发送网络请求
    // console.log('created...')

    try {
      const [{ list: categories }, { list: products, isEnd, nextIndex }] =
        await Promise.all([getCategories(), getHots()])
      // 修改 data 数据，以响应式渲染
      this.categories = categories
      this.products = products
      this.nextIndex = nextIndex
      this.isEnd = isEnd
      this.loading = false
    } catch (error) {
      console.error('有错误：', error)
    }
  },

  methods: {
    /**
     * 触底加载更多商品
     */
    async onLoad() {
      // 异步更新数据
      const { list, nextIndex, isEnd } = await getHots(this.nextIndex)
      this.products = [
        ...this.products, // 浅拷贝，将原有 products 数组中的元素复制到新数组中
        ...list,
      ]
      this.nextIndex = nextIndex
      this.isEnd = isEnd
      this.loading = false
    },
    handleAddToCart(prod) {
      // 构建当前选购的商品对象
      const currentProduct = {
        id: prod.id,
        image: prod.image,
        title: prod.title,
        price: prod.price,
      }
      // 加入购物车，更新 vuex store 中的状态数据
      // 选购中不能直接调用到 store 中定义的 action 方法
      // 而是需要调用 store.dispatch(action) 来分发 action
      this.$store.dispatch('cart/addToCartAsync', currentProduct)
      // 提示
      this.$toast({
        type: 'success',
        message: '加入成功',
      })
    },
  },
}
</script>

<style lang="less" scoped>
/deep/.van-grid {
  .van-grid-item__content {
    background-color: #f6f6f6;
  }
}
.l {
  border-radius: 24px;
  text-align: center;
  margin-left: 8px;
  border-radius: 24px;
  margin-right: 8px;
  img {
    border-radius: 24px;
  }
}
.right {
  overflow: hidden;
  background-color: #f6f6f6;

  .photo {
    margin-left: 20px;
    margin-right: 20px;
    border-radius: 24px 24px;
    background-color: #f6f6f6;

    overflow: hidden;
    margin-top: 16px;
    .list-img {
      display: flex;
      height: 100%;
      li {
        flex: 1;
        width: 50%;
        a {
          display: block;
        }
        img {
          width: 100%;
          height: auto;
          display: block;
        }
      }
    }
  }
  .left {
    margin: 10px 5px;
    margin-top: 10px;
  }
}
.homer {
  background-color: #f6f6f6;
  overflow: hidden;
}
.home {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;

  .shopCard {
    width: 43%;
    height: 6rem;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    border: 1px solid #ccc;
    border-radius: 15px;
    margin: 25px 5px;

    img {
      height: 70%;
      width: 100%;
      border-radius: 15px;
      background-size: 100%;
    }
    h5 {
      height: 0.5rem;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      border-top: 1px dashed gainsboro;
      text-overflow: ellipsis;
      margin: 5px 2px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .p2 {
      font-size: 18px;
      color: #b20fd3;
      font-weight: 600;
      margin-top: 6px;
      display: flex;
      line-height: 50px;

      i {
        font-style: normal;
        font-size: 11px;
        font-weight: 600;
      }
      .cart {
        width: 40px;
        height: 40px;
        background-color: #b20fd3;
        line-height: 40px;
        position: absolute;
        background: url("../../assets/1.png") no-repeat 50%/90% content-box
        content-box;
        margin-left: 270px;
      }
    }
  }
}
</style>
